import React from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts-for-react';

var createReactClass = require('create-react-class');

var hours = [
  '12am',
  '1am',
  '2am',
  '3am',
  '4am',
  '5am',
  '6am',
  '7am',
  '8am',
  '9am',
  '10am',
  '11am',
  '12pm',
  '1pm',
  '2pm',
  '3pm',
  '4pm',
  '5pm',
  '6pm',
  '7pm',
  '8pm',
  '9pm',
  '10pm',
  '11pm',
];

const option = {
  tooltip: {
    position: 'bottom',
  },
  title: [
    {
      textBaseline: 'middle',
      top: '11%',
      text: '周一',
      textStyle: {
        fontSize: 12,
      },
    },
    {
      textBaseline: 'middle',
      top: '25%',
      text: '周二',
      textStyle: {
        fontSize: 12,
      },
    },
    {
      textBaseline: 'middle',
      top: '39%',
      text: '周三',
      textStyle: {
        fontSize: 12,
      },
    },
    {
      textBaseline: 'middle',
      top: '53%',
      text: '周四',
      textStyle: {
        fontSize: 12,
      },
    },
    {
      textBaseline: 'middle',
      top: '67%',
      text: '周五',
      textStyle: {
        fontSize: 12,
      },
    },
    {
      textBaseline: 'middle',
      top: '81%',
      text: '周六',
      textStyle: {
        fontSize: 12,
      },
    },
    {
      textBaseline: 'middle',
      top: '95%',
      text: '周日',
      textStyle: {
        fontSize: 12,
      },
    },
  ],
  singleAxis: [
    {
      left: 70,
      type: 'category',
      boundaryGap: false,
      data: hours,
      top: '7%',
      height: '4%',
      axisLabel: {
        interval: 2,
      },
    },
    {
      left: 70,
      type: 'category',
      boundaryGap: false,
      data: hours,
      top: '21%',
      height: '4%',
      axisLabel: {
        interval: 2,
      },
    },
    {
      left: 70,
      type: 'category',
      boundaryGap: false,
      data: hours,
      top: '35%',
      height: '4%',
      axisLabel: {
        interval: 2,
      },
    },
    {
      left: 70,
      type: 'category',
      boundaryGap: false,
      data: hours,
      top: '49%',
      height: '4%',
      axisLabel: {
        interval: 2,
      },
    },
    {
      left: 70,
      type: 'category',
      boundaryGap: false,
      data: hours,
      top: '63%',
      height: '4%',
      axisLabel: {
        interval: 2,
      },
    },
    {
      left: 70,
      type: 'category',
      boundaryGap: false,
      data: hours,
      top: '77%',
      height: '4%',
      axisLabel: {
        interval: 2,
      },
    },
    {
      left: 70,
      type: 'category',
      boundaryGap: false,
      data: hours,
      top: '91%',
      height: '4%',
      axisLabel: {
        interval: 2,
      },
    },
  ],
  series: [
    {
      singleAxisIndex: 0,
      coordinateSystem: 'singleAxis',
      type: 'scatter',
      data: [
        [0, 0],
        [1, 1],
        [0, 0],
        [3, 0],
        [4, 0],
        [5, 0],
        [6, 0],
        [7, 0],
        [8, 0],
        [9, 0],
        [10, 0],
        [11, 2],
        [12, 0],
        [13, 1],
        [14, 1],
        [15, 0],
        [16, 0],
        [17, 6],
        [18, 0],
        [19, 0],
        [20, 0],
        [21, 0],
        [22, 2],
        [23, 0],
      ],
      symbolSize: function(dataItem: any) {
        return dataItem[1] * 4;
      },
    },
    {
      singleAxisIndex: 1,
      coordinateSystem: 'singleAxis',
      type: 'scatter',
      data: [
        [0, 1],
        [1, 1],
        [2, 0],
        [3, 0],
        [4, 0],
        [5, 0],
        [6, 0],
        [7, 0],
        [8, 0],
        [9, 0],
        [10, 0],
        [11, 2],
        [12, 1],
        [13, 0],
        [14, 0],
        [15, 0],
        [16, 6],
        [17, 0],
        [18, 0],
        [19, 0],
        [20, 0],
        [21, 0],
        [22, 2],
        [23, 0],
      ],
      symbolSize: function(dataItem: any) {
        return dataItem[1] * 4;
      },
    },
    {
      singleAxisIndex: 2,
      coordinateSystem: 'singleAxis',
      type: 'scatter',
      data: [
        [0, 1],
        [1, 0],
        [2, 0],
        [3, 0],
        [4, 0],
        [5, 0],
        [6, 0],
        [7, 0],
        [8, 0],
        [9, 0],
        [10, 1],
        [11, 0],
        [12, 2],
        [13, 1],
        [14, 0],
        [15, 0],
        [16, 0],
        [17, 0],
        [18, 0],
        [19, 0],
        [20, 1],
        [21, 2],
        [22, 2],
        [23, 6],
      ],
      symbolSize: function(dataItem: any) {
        return dataItem[1] * 4;
      },
    },
    {
      singleAxisIndex: 3,
      coordinateSystem: 'singleAxis',
      type: 'scatter',
      data: [
        [0, 0],
        [1, 0],
        [2, 0],
        [3, 0],
        [4, 0],
        [5, 0],
        [6, 0],
        [7, 0],
        [8, 1],
        [9, 0],
        [10, 0],
        [11, 0],
        [12, 0],
        [13, 0],
        [14, 0],
        [15, 0],
        [16, 0],
        [17, 0],
        [18, 0],
        [19, 0],
        [20, 6],
        [21, 0],
        [22, 0],
        [23, 1],
      ],
      symbolSize: function(dataItem: any) {
        return dataItem[1] * 4;
      },
    },
    {
      singleAxisIndex: 4,
      coordinateSystem: 'singleAxis',
      type: 'scatter',
      data: [
        [0, 1],
        [1, 0],
        [2, 0],
        [3, 0],
        [4, 0],
        [5, 1],
        [6, 0],
        [7, 0],
        [8, 0],
        [9, 2],
        [10, 0],
        [11, 0],
        [12, 2],
        [13, 0],
        [14, 0],
        [15, 0],
        [16, 0],
        [17, 1],
        [18, 0],
        [19, 0],
        [20, 0],
        [21, 0],
        [22, 0],
        [23, 0],
      ],
      symbolSize: function(dataItem: any) {
        return dataItem[1] * 4;
      },
    },
    {
      singleAxisIndex: 5,
      coordinateSystem: 'singleAxis',
      type: 'scatter',
      data: [
        [0, 2],
        [1, 1],
        [2, 0],
        [3, 0],
        [4, 0],
        [5, 0],
        [6, 0],
        [7, 0],
        [8, 2],
        [9, 0],
        [10, 0],
        [11, 1],
        [12, 0],
        [13, 0],
        [14, 0],
        [15, 0],
        [16, 0],
        [17, 6],
        [18, 0],
        [19, 0],
        [20, 0],
        [21, 0],
        [22, 2],
        [23, 0],
      ],
      symbolSize: function(dataItem: any) {
        return dataItem[1] * 4;
      },
    },
    {
      singleAxisIndex: 6,
      coordinateSystem: 'singleAxis',
      type: 'scatter',
      data: [],
      symbolSize: function(dataItem: any) {
        return dataItem[1] * 4;
      },
    },
  ],
};

const ScatterCharts = createReactClass({
  propTypes: {},
  getOtion: function() {
    return option;
  },
  render: function() {
    return (
      <ReactEcharts
        option={this.getOtion()}
        theme="dark"
        style={{ height: '99%', width: '100%' }}
        className="react_for_echarts"
      />
    );
  },
});

export default ScatterCharts;
